<template>
  <div class="index">
    <Homehead />
    <van-tabs v-model="active" sticky swipeable>
      <!-- **发现编辑器报警告记得带上 :key, 是一个当前列表唯一值, 通常是 index 或者 item.id** -->
      <van-tab :title="item.name" v-for="item in column" :key="item.id">
        <!-- <div v-for="items in columnData" :key="items.id">{{items.title}}</div> -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <Homebody
            v-for="items in item.columnarr"
            :key="items.id"
            :spread="items"
            @gopage="$router.push('/newsdetails/' + items.id)"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Homehead from "../components/Homehead";
import Homebody from "../components/Homebody";
export default {
  components: {
    Homehead,
    Homebody,
  },
  data() {
    return {
      active: 0,
      column: [],

      // columnData: []
    };
  },
  watch: {
    active() {
      if (this.column[this.active].columnarr.length == 0) {
        //判断一下当长度等于0时才加载页面渲染,这样就不用重复发请求给服务器加压力
        this.getcolumndata();
      }
    },
  },
  //这是一个计算优化
  computed: {
    categoryIdnum() {
      var categoryId = this.column[this.active].id;
      // console.log(categoryId);
      return categoryId;
    },
  },
  methods: {
    getcolumn() {
      //2.1判断是否本地有栏目数据,有则无需$axios获取
      if (localStorage.getItem("columnlist")) {
        const tores = localStorage.getItem("columnlist");
        //2.2因为localStorage.getItem("columnlist")本来就是一个数据数组的字符串类型,所以直接转数组就直接用,无需再data.data
        var column = JSON.parse(tores).map((user) => {
          return {
            ...user, //1.1.给栏目加一个属性,里面是数组,之前那个共用,每次切换栏目的时候都会覆盖掉上一次的数据,非常浪费还给服务器加压力
            columnarr: [],
            pageSize: 5,
            pageIndex: 1,
            loading: false,
            finished: false,
          };
        });
        this.column = column;
        console.log(this.column);
        this.getcolumndata();
        //2.3无则需$axios获取
      } else {
        //获取添加栏目数据
        this.$axios({
          url: "/category",
        }).then((res) => {
          var column = res.data.data.map((user) => {
            return {
              ...user, //给栏目加一个属性,里面是数组,之前那个共用,每次切换栏目的时候都会覆盖掉上一次的数据,非常浪费还给服务器加压力
              columnarr: [],
              pageSize: 5,
              pageIndex: 1,
              loading: false,
              finished: false,
            };
          });
          this.column = column;
          console.log(this.column);
          this.getcolumndata();
        });
      }
    },

    getcolumndata() {
      //获取文章列表数据
      this.$axios({
        url: "/post",
        params: {
          category: this.categoryIdnum,
          pageSize: this.column[this.active].pageSize,
          pageIndex: this.column[this.active].pageIndex,
        },
      }).then((res) => {
        const currentCategory = this.column[this.active];
        //1.2每个栏目单独存的数组数据
        // currentCategory.columnarr = res.data.data;
        console.log(res.data.data);
        currentCategory.columnarr = [
          ...currentCategory.columnarr,
          ...res.data.data,
        ];

        //这里是加载数据完毕
        currentCategory.loading = false;
        if (currentCategory.pageSize > res.data.data.length) {
          currentCategory.finished = true;
        } else {
          console.log("加载下一页面");
        }
      });
    },
    onLoad() {
      this.column[this.active].pageIndex += 1;

      this.getcolumndata();
    },
  },
  mounted() {
    this.getcolumn();
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  color: rgb(112, 159, 245);
}
</style>